<div class="userinfo">
    <div class="icon">
        <img src="../public/all/images/phone/avatar.png"/>
    </div>
    <div class="userdetail">
        欢迎您！<span class="name">--</span> <br/>
        <span class="line2">
            积分余额：<span class="red">  </span>
        </span>
    </div>
    <div class="clear"></div>
</div>

<div class="tabs">
    <ul class="am-avg-sm-4">
        <li class="charge">存款</li>
        <li class="take">取款</li>
        <li class="charge_log">存款记录</li>
        <li class="take_log" style="border:0px;">取款记录</li>
    </ul>
</div>

<!-- 存款 -->
<div class="charge-c">
    <div class="disable">充值暂时关闭！</div>
    <div class="bank-charge item-charge">
        <a href="#">
            <div class="icon"><img src="../public/all/images/phone/icon-bank.png" width="35px"/></div>
            <div class="arrow"><img src="../public/all/images/phone/arrow.png" width="9px"/></div>
            <div class="title">银行转账</div>
            <div class="clue">线下入款，您的首选</div>
            <div class="clear"></div>
        </a>
    </div>

    <div class="alipay-charge item-charge">
        <a href="#">
            <div class="icon"><img src="../public/all/images/phone/icon-alipay.png" width="35px"/></div>
            <div class="arrow"><img src="../public/all/images/phone/arrow.png" width="9px"/></div>
            <div class="title">支付宝支付</div>
            <div class="clue">支付宝转账支付</div>
            <div class="clear"></div>
        </a>
    </div>

    <div class="wechat-charge item-charge">
        <a href="#">
            <div class="icon "><img src="../public/all/images/phone/icon-wechat.png" width="35px"/></div>
            <div class="arrow"><img src="../public/all/images/phone/arrow.png" width="9px"/></div>
            <div class="title">微信支付</div>
            <div class="clue">微信转账支付</div>
            <div class="clear"></div>
        </a>
    </div>
</div>

<!-- 取款 -->
<div class="take-c">
    <div class="common_item">
            <table class="with-title-input">
                <tr>
                    <td class="title">收款方式</td>
                    <td class="input">
                        <select data-am-selected>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
        
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">取款金额</td>
                <td class="input">
                    <input type="number" class="am-form-field amount" placeholder="请填写取款金额" />
                </td>
            </tr>
        </table>
    </div>
    <div class="form_clue">单笔下限<span class="red">100</span>，单笔上限<span class="red">1000000</span></div>
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">备注</td>
                <td class="input">
                    <input type="text" class="am-form-field memo" placeholder="请填写备注信息" />
                </td>
            </tr>
        </table>
    </div>

    <div style="margin: 15px;">
        <button type="button" class="btn-take common_button">确认提交</button>
    </div>
</div>

<!-- 存款/取款记录 -->
<div class="log-c">
    <table class="mobile">
        <tr value="-1">
            <th>时间</th>
            <th>金额</th>
            <th>状态</th>
        </tr>
    </table>
</div>

<div class="empty">
    本群尚未添加充值信息，请联系群主添加！
</div>

<div class="groups-title">注意：积分在如下几个群中共享</div>
<ul class="am-avg-sm-3 groups">
</ul>

<style type="text/css">
    body {
        background-color: #eeeeee;
    }
    .userinfo {
        height: 80px;
        border-top: 1px solid #b8b8b8;
        border-bottom: 1px solid #b8b8b8;
        color: #000;
        font-weight: bold;
    }
    .userinfo .icon {
        float: left;
        width: 90px;
        text-align: right;
        padding-top: 10px;
    }
    .userinfo .icon img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .userinfo .userdetail {
        float: left;
        margin-left: 10px;
        margin-top: 15px;
    }
    .userinfo .userdetail .line2 {
        font-size: 14px;
        color: #838383;
    }

    .mobile td {
        background-color: #fff;
    }
    .common_button { margin: 0px; }
    .charge-c .disable {
        text-align: center;
        color: red;
        line-height: 50px;
        display: none;
    }
    .am-selected {
        width: 100% !important;
    }
</style>

<script>
    $(".charge-c").hide();
    $(".take-c").hide();
    $(".log-c").hide();
    var n = urlInfo.params.n;
    if (n == 'take') {
        $(".take-c").show();
        $(".tabs .take").attr("class", "take active");
    }
    else if (n == 'charge_log') {
        $(".log-c").show();
        $(".tabs .charge_log").attr("class", "charge_log active");
    }
    else if (n == 'take_log') {
        $(".log-c").show();
        $(".tabs .take_log").attr("class", "take_log active");
    }
    else {
        n = 'charge';
        $(".tabs .charge").attr("class", "charge active");
        $(".charge-c").show();

        $(".charge-c .bank").hide();
        $(".charge-c .wechat").hide();
        $(".charge-c .alipay").hide();
    }

    // 取款方式
    var bankCharge = {}, wechatCharge = {}, alipayCharge = {};
    function fillUserInfo() {
        var user = context.user.user;
        $(".userinfo .icon img").attr("src", user.portrait);
        $(".userinfo .name").html(user.nick || user.mobile);

        if (user.bank) {
            bankCharge = JSON.parse(user.bank);
        }
        if (user.wechatCharge) {
            wechatCharge = JSON.parse(user.wechatCharge);
        }
        if (user.alipayCharge) {
            alipayCharge = JSON.parse(user.alipayCharge);
        }

        var s = $(".take-c select");
        if (bankCharge.bank && bankCharge.addr && bankCharge.account) {
            s.append('<option value="bank">银行转账</option>');
        }
        if (wechatCharge.qrcode) {
            s.append('<option value="wechat">微信转账</option>');
        }
        if (alipayCharge.qrcode) {
            s.append('<option value="alipay">支付宝转账</option>');
        }
    }
    ME.query(function() {
        fillUserInfo();
        GroupUtil.init(true, function(group) {
            GroupUtil.fillGroups($(".groups"));
            $(".userinfo .line2 .red").html((GroupUtil.account.balance/100).toFixed(2));

            // 获取本群的充值方式
            if (n == 'charge') {
                var charges = GroupUtil.queryChargeTypes();
                if (Util.isEmpty(charges)) {
                    $(".charge-c").hide();
                    $(".empty").show();
                    return;
                }
                $(".empty").hide();

                if (charges['alipay'] && charges['alipay'].enable == 1) {
                    $(".alipay").show();
                }
                if (charges['wechat'] && charges.wechat.enable == 1) {
                    $(".wechat").show();
                }

                var bank;
                for (var i in charges.bank) {
                    if (charges.bank[i].enable == 1) {
                        bank = charges.bank[i];
                        break;
                    }
                }
                if (bank) {
                    $(".bank").show();
                }
            }
            else if (n == "charge_log") {
                // 存款记录
                CMD.query_account_log2({
                    owner: GroupUtil.group.owner,
                    type: "deposit",
                    pageSize: 200,
                }, function(r) {
                    fillLog(r.list);
                });
            }
            else if (n == "take_log") {
                // 取款记录
                CMD.query_account_log2({
                    owner: GroupUtil.group.owner,
                    type: "withdraw",
                    pageSize: 200,
                }, function(r) {
                    fillLog(r.list);
                });
            }
        });
    });

    // tab标签切换
    $(".tabs .charge").click(function() {
        Util.jumpUrl({
            n: "charge",
        });
    });
    $(".tabs .take").click(function() {
        Util.jumpUrl({
            n: "take",
        });
    });
    $(".tabs .charge_log").click(function() {
        Util.jumpUrl({
            n: "charge_log",
        });
    });
    $(".tabs .take_log").click(function() {
        Util.jumpUrl({
            n: "take_log",
        });
    });

    $(".bank-charge a").click(function() {
        Util.jumpUrl({
            cmd: "charge_bank",
        });
    });
    $(".alipay-charge a").click(function() {
        Util.jumpUrl({
            cmd: "charge_alipay",
        });
    });
    $(".wechat-charge a").click(function() {
        Util.jumpUrl({
            cmd: "charge_wechat",
        });
    });

    // 取款处理
    $(".take-c .btn-take").click(function() {
        var type = $(".take-c select").val();
        var b;
        if (type == 'bank') b = bankCharge;
        else if (type == 'wechat') b = wechatCharge;
        else if (type == 'alipay') b = alipayCharge;
        else {
            alert2("请先绑定银行卡信息");
            setTimeout(function() {
                Util.jumpUrl({
                    cmd: "bind",
                });
            }, 2000);
            return;
        }

        var amount = $(".take-c .amount").val();
        if (amount == '') {
            alert2("请输入取款金额！");
            return;
        }
        amount = parseInt(amount);
        if (amount < 100 || amount > 1000000) {
            alert2("取款金额不合法！");
            return;
        }

        if (GroupUtil.account.balance < amount * 100) {
            alert2("余额不足！");
            return;
        }

        var memo = {
            type: type,
            bank: b,
        }
        startLoading();
        CMD.withdraw(undefined, GroupUtil.group.owner, amount*100, memo, function() {
            stopLoading();
            alert2("提交成功！");
            ME.query();
        }, function(message) {
            stopLoading();
            alert2("提交失败，错误原因：" + message);
            ME.query();
        });
    });

    var logList = [];
    function fillLog(list) {
        logList = list;
        var table = $(".log-c table");
        for (var i in list) {
            var d = list[i];
            var tr = $("<tr value='__i__'></tr>".replace(/__i__/, i));
            tr.append('<td>' + d.start.substring(5) + '</td>');
            tr.append('<td class="red">' + (d.amount/100).toFixed(2) + '</td>');
            if (d.state == 0) {
                if (d.type == 'deposit') tr.append('<td>充值中</td>');
                else tr.append('<td>等待审核</td>');
            }
            else if (d.state == 1) {
                if (d.type == 'deposit') tr.append('<td>充值完成</td>');
                else tr.append('<td>已打款</td>');
            }
            else {
                tr.append('<td>已取消</td>');
            }
            table.append(tr);
        }
        if (list.length == 0) {
            table.append("<tr><td colspan='3'>没有数据</td></tr>");
        }

        // 行点击后显示详情
        $(".log-c table tr").click(function(e) {
            var index = $(e.currentTarget).attr("value");
            if (index == -1) return;
            var data = logList[index];
            if (data)
                showLogDetail(data);
        });
    }

    function showLogDetail(data) {
        $("#log_content").css("max-height", ($(window).height() - 120) + "px");
        var w = w || $("body").width();
        if (w > 300) w = 300;
        if (w > $("body").width()) w = $("body").width() - 40;
        $("#log").modal({
            width: w,
        });

        var c = $("#log .log_content");
        c.empty();
        var t = '<div class="item"><div class="c1">__title__：</div><div class="c2">__v__</div><div class="clear"></div></div>';

        var line = t.replace(/__title__/, "发起时间");
        line = line.replace(/__v__/, data.start);
        c.append(line);

        var line = t.replace(/__title__/, "交易类型");
        line = line.replace(/__v__/, Util.convertLogType(data.type));
        c.append(line);

        var line = t.replace(/__title__/, "交易金额");
        line = line.replace(/__v__/, (data.amount / 100).toFixed(2));
        c.append(line);

        var line = t.replace(/__title__/, "交易状态");
        if (data.state == 0) {
            if (data.type == 'deposit') line = line.replace(/__v__/, "充值中")
            else line = line.replace(/__v__/, "等待审核");
        }
        else if (data.state == 1) {
            if (data.type == 'deposit') line = line.replace(/__v__/, "充值完成");
            else line = line.replace(/__v__/, "已打款");
        }
        else {
            line = line.replace(/__v__/, "已取消");
        }
        c.append(line);

        var detail = '';
        if (data.type == 'deposit') {
            var line = t.replace(/__title__/, "充值方式");
            line = line.replace(/__v__/, Util.convertChannel(data.channel2));
            c.append(line);

            detail = Util.convertMemo(data);
        }
        else if (data.type == 'withdraw') {
            var memo = {};
            try { memo = JSON.parse(data.memo); } catch(e) {}
            if (memo.type == 'bank') detail = "银行转账";
            else if (memo.type == 'wechat') detail = "微信转账";
            else if (memo.type == 'alipay') detail = "支付宝转账";
            else detail = data.memo;
        }

        var line = t.replace(/__title__/, "摘要");
        line = line.replace(/__v__/, detail || '无');
        c.append(line);
    }
</script>